<template>
  <el-dialog :title="isNewRef ? '新建用户' : '编辑用户'" v-model="dialogVisible" width="30%" center>
    <div class="form">
      <el-form :model="formData" label-width="70">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="真实姓名" prop="realname">
          <el-input v-model="formData.realname" placeholder="请输入真实姓名" />
        </el-form-item>

        <el-form-item label="密码" prop="password" v-if="isNewRef">
          <el-input v-model="formData.password" placeholder="请输入密码" show-password />
        </el-form-item>

        <el-form-item label="电话号码" prop="cellphone">
          <el-input v-model="formData.cellphone" placeholder="请输入手机号码" />
        </el-form-item>

        <el-form-item label="角色" prop="roleId">
          <el-select v-model="formData.roleId" placeholder="请选择角色">
            <el-option :value="role.id + ''" :label="role.name" v-for="role in entireRoles" :key="role.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="部门" prop="departmentId">
          <el-select v-model="formData.departmentId" placeholder="请选择角色">
            <el-option :value="dept.id + ''" :label="dept.name" v-for="dept in entireDepartments" :key="dept.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { storeToRefs } from 'pinia'
  import useMainStore from '@/store/main/main'
  import useUserStore from '@/store/main/system/user/user'

  const dialogVisible = ref<boolean>(false)
  const isNewRef = ref<boolean>(false)
  const editData = ref<any>(null)
  const formData = reactive<any>({
    name: '',
    realname: '',
    password: '',
    cellphone: '',
    roleId: '',
    departmentId: ''
  })
  const mainStore = useMainStore()
  const userStore = useUserStore()
  const { entireDepartments, entireRoles } = storeToRefs(mainStore)

  function setDialogVisible(isNew: boolean = true, itemData?: any) {
    isNewRef.value = isNew
    if (!isNew && itemData) {
      for (const key in formData) {
        formData[key] = itemData[key] + ''
      }
      delete formData.password
      editData.value = itemData
    } else {
      for (const key in formData) {
        formData[key] = ''
      }
      editData.value = null
    }
    dialogVisible.value = true
  }
  function confirm() {
    if (isNewRef.value) {
      userStore
        .newUserDataAction(formData)
        .then(() => ElMessage.success('新建用户成功'))
        .finally(() => (dialogVisible.value = false))
    } else {
      userStore
        .editUserDataAction(editData.value.id as number, formData)
        .then(() => ElMessage.success('更新用户成功'))
        .finally(() => (dialogVisible.value = false))
    }
  }

  defineExpose({
    setDialogVisible
  })
</script>

<style lang="scss" scoped>
  .form {
    padding: 0 20px;
  }
</style>
